React Markdown renderer, editor and template engine

Render Markdown. Add editing. Personalize it. Three React packages that share one Markdown model, so an app can grow from displaying Markdown to authoring and personalizing it without changing how anything is stored.

Get started Try the renderer demo

npm i @react-markdown-kit/renderer

Start here

One component

No provider, no stylesheet, no configuration, no design system. Edit the Markdown on the left and watch the output follow, or open the renderer demo to try every option and copy the code.

import Markdown from '@react-markdown-kit/renderer'

<Markdown>{content}</Markdown>

Markdown (edit me)

Rendered

Release 1.4

Ships today. See the changelog.

Faster cold render
compileMarkdown is now public

Metric	Before	After
Cold render	12.4 ms	9.1 ms

Then, when you need it

The same document, personalized

Switch customer. The output changes and the authored source does not. That is the whole idea: it stays Markdown at every step.

Authored template never changes

## Account review for {{customer.name}}

Your plan renews on {{renewsAt | date:"medium"}}.

| Item | Amount |
| --- | ---: |
| Subscription | {{amounts.subscription \| currency:"USD"}} |
| Overage | {{amounts.overage \| currency:"USD"}} |

Resolved for Acme changes

Account review for Acme Industrial

Your plan renews on Nov 1, 2026.

Item	Amount
Subscription	$4,800.00
Overage	$312.50

Data passed to template()

{
  "customer": {
    "name": "Acme Industrial"
  },
  "renewsAt": "2026-11-01",
  "amounts": {
    "subscription": 4800,
    "overage": 312.5
  }
}

Resolution runs here in your browser with the same engine a Node service, an email job or a PDF pipeline would use. Resolving never calls React.

Two packages, and three plugin packages that work in both

The renderer never requires the editor. Templates, Mermaid diagrams and slides install separately and are used only through the extension system.

Renderer

Markdown to React. Safe by default, unstyled by default, server-ready. Matches react-markdown on every compared prop.

Editor

Rich, source and preview authoring that reads and writes plain Markdown. Opening and closing a document does not change a byte of it.

Templates

template({ data }) resolves typed variables while the renderer parses; templateVariables() edits them as chips. A plugin package: no engine to call, and no React needed to resolve.

Diagrams

mermaid() turns a ```mermaid flowchart into static SVG in the renderer and a drawing canvas in the editor. A plugin package with one export.

Slides

slides() reads a Markdown file whose slides are separated by --- and renders it as a deck of sections; /present adds keyboard-driven present mode and /editor the authoring commands.

Guides

Task pages with live examples, each rendered by the kit itself when this site was built.

React Markdown renderer One component, every default, with the evidence for each.
How to render Markdown in React GFM, custom components, links, code blocks, security, server rendering.
Streaming Markdown in React Every partial prefix renders; the two constructs that rewrite themselves are named.
Markdown in Next.js Server components with no client JavaScript, and precompiled documents.
React Markdown editor Rich, source and preview modes that store plain Markdown.
Lossless Markdown editing 22 of 22 audited documents open and save byte for byte.
Lexical Markdown editor Why Lexical, how the package wraps it, when to use the headless API.
Markdown template engine Typed variables, schemas, formatters and locales, resolved in the parser.
Markdown template variables Placeholder syntax in a .md file, and why data cannot inject structure.
Personalized Markdown One authored report, resolved per customer and per locale.
Mermaid in React Flowcharts as static SVG without Mermaid.js. Flowcharts only.
Markdown presentations in React A deck from one Markdown file, with present mode and speaker notes.

Comparisons

One page per library, on install size, output format, security defaults, server rendering and migration. Byte counts come from docs/data/bundle-sizes.json, written by scripts/compare-bundles.mjs.

react-markdown alternative 39 of 39 prop comparisons render identical markup; three differences documented.
vs react-markdown Install size, GFM, security defaults, streaming, server rendering, migration.
vs markdown-to-jsx Install size, GFM, security defaults, streaming, server rendering, migration.
vs Streamdown The same rows, for an AI chat UI that renders tokens as they arrive.
Editor vs MDXEditor Editing model, output format, round trip, bundle size, server rendering.
Editor vs Milkdown Editing model, output format, round trip, bundle size, ProseMirror.
Templating vs Handlebars String interpolation before parsing, against resolution inside the parser.
Marp and Slidev alternative A deck inside a React app, with no PDF or PPTX export.
Mermaid Live Editor alternative mermaid.live next to the canvas: editing, sharing, price, licence, diagram types.
Migrate from react-markdown The three differences, and a codemod that refuses to guess.

Evidence, not adjectives

We do not claim “drop-in replacement” or “fastest”. Every number here has a test behind it.

39/39

prop comparisons matching react-markdown 10.1.0

96%

CommonMark examples, counting raw HTML dropped by design

22/22

editor round trips that are byte-identical

styling dependencies in any package